<template>
    <div>
        <div id="box">
            <span class="fa fa-angle-left" id="back" @touchstart="back"></span>
            <span id="title">商品发布</span>
        </div>
        <div id="outer">

            <input type="text" placeholder="商品名称" v-model="name">
            <br>
            <input type="text" placeholder="商品详情" v-model="detail">
            <br>
            <input type="text" placeholder="商品价格" v-model="price">
            <br>
            <input type="text" placeholder="商品大类" v-model="bigclasses">
            <br>
            <input type="text" placeholder="商品小类" v-model="littleclasses">
            <div id="img">商品分类</div>
            <Selectaaa></Selectaaa>
        </div>
        <div id="img">上传图片</div>
        <div id="img-list">
            <label for="file-selector" id="file-label">+</label>
            <input id="file-selector" name="file-selector" type="file" accept="image/jpeg,image/png,image/gif" @change="chooseImage" multiple>
        </div>
        <br>
        <button @click="BtnClick">提交</button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import Selectaaa from "../components/Selectaaa.vue"
export default {
    data: function() {
        return {
            name: "",
            detail: "",
            price: "",
            bigclasses: "",
            littleclasses: "",
            files: [],
        }
    },
    components: {
        Selectaaa,
    },
    methods: {
        back: function() {
            history.back()
        },

        chooseImage: function(e) {
            var fileLabel = document.getElementById("file-label");
            var imgList = document.getElementById("img-list");
            // var files = [];
            for (var i = 0; i < e.target.files.length; i++) {
                var f = e.target.files[i];
                this.files.push(f);
                var img = document.createElement("img");
                img.style.width = "28vw"
                img.classList.add("images");
                var url = URL.createObjectURL(f);
                img.src = url;
                imgList.insertBefore(img, fileLabel);
            }
            console.dir(this.files)
        },
        BtnClick: function() {
            var data = new FormData();
            data.append("name", this.name);
            data.append("detail", this.detail);
            data.append("price", this.price);
            data.append("bigclasses", this.bigclasses);
            data.append("littleclasses", this.littleclasses);


            for (var i = 0; i < this.files.length; i++) {
                data.append("image", this.files[i]);
            }
            // console.dir (data)
            this.http.post("/api/upload", data, {
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            }).then(res => {
                Toast({
                    message: '上传成功',
                    position: 'middle',
                    duration: 1000
                });

            })
            var param = {
                bigclasses: this.bigclasses,
                littleclasses: this.littleclasses
            }
            this.http.post("/api/class", param)
                .then(res => {

                })


        },

    }
}
</script>
   
<style scoped>
#box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 7vh;
    font-size: 28px;
    border-bottom: solid 1px gainsboro;
}

#back {
    margin-left: 3vw;
    cursor: pointer;
}

#title {
    margin-right: 32vw;
}

input {
    width: 90%;
    height: 7vh;
    margin-left: 5vw;
    border: solid 1px gainsboro;
}

#img {
    margin-left: 5vw;
    color: gray;
    font-size: 20px;
}

#outer {
    margin-top: 3vh;
}

button {
    cursor: pointer;
    width: 90%;
    height: 7vh;
    margin-left: 5vw;
    margin-top: 5vh;
    background-color: #FF9E93;
    border: solid 1px #FF9E93;
    border-radius: 8px;
    color: white;
    font-size: 20px;
}


#file-label {
    width: 28vw;
    height: 28vw;
    border: solid 1px gainsboro;
    display: inline-block;
    font-size: 80px;
    text-align: center;
    line-height: 28vw;
    vertical-align: top;
}

#file-selector {
    display: none;
}

#img-list {
    width: 90%;
    /* height: 20vh; */
    margin-left: 5vw;
    border: solid 1px gainsboro;
}
</style>